<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .home {
        width: 100vw;
        height: 100vh;
        background-color: #b8b8b8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-weight: 900;
      }

      .container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }

      .container div {
        width: 300px;
        height: 130px;
        background-color: #fa7777;
        margin-top: 30px;
      }

      .container div:nth-child(even) {
        background-color: #d0ff35;
        margin-left: 30px;
      }

      .an {
        animation: demo linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }

      @keyframes demo {
        0% {
          opacity: 0;
          transform: scale(0.5);
          /* transform: translateX(-100px); */
          clip-path: inset(100% 100% 0 0);
        }
        100% {
          opacity: 1;
          transform: scale(1);
          /* transform: translateX(0); */
          clip-path: inset(0 0 0 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="home">Hello，World</div>

    <h1 class="an">淡入淡出（出现在视口中触发）</h1>
    <p>
      <a
        href="https://www.bilibili.com/video/BV18Z421N7qP/?spm_id_from=333.1007.tianma.1-2-2.click&vd_source=745d1e6dc172f4afa9af1af10c052b04"
        >视频教程</a
      >
    </p>

    <div class="container">
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
      <div class="an"></div>
    </div>
  </body>
</html>
